<template>
	<view class="report-detail">
		<up-form labelPosition="top" :model="deviceInfo" ref="reportFrom"
			:labelStyle="{ fontSize:'28rpx',color:'#9296b1'}" labelWidth="auto">
			      <up-form-item label="设备名称">
			        <up-input v-model="deviceInfo.deviceName" border="none"></up-input>
			      </up-form-item>
			      <up-form-item label="设备地址">
			        <up-input v-model="deviceInfo.address" border="none"></up-input>
			      </up-form-item>
			      <up-form-item label="故障描述">
			        <up-input v-model="deviceInfo.faultDesc" border="none"></up-input>
			      </up-form-item>
			      <up-form-item label="报修人">
			        <up-input v-model="deviceInfo.reporter" border="none"></up-input>
			      </up-form-item>
			      <up-form-item label="联系电话">
			        <up-input v-model="deviceInfo.phone" border="none"></up-input>
			      </up-form-item>
			      <up-form-item label="报修时间">
			        <up-input v-model="deviceInfo.reportTime" border="none"></up-input>
			      </up-form-item>
				  <up-form-item label="处理状态">
				    <up-input v-model="statusText" border="none"></up-input>
				  </up-form-item>
			      <up-form-item label="维修记录" v-if="deviceInfo.getStatusType == 2">
			        <up-input v-model="deviceInfo.repairRecord" border="none"></up-input>
			      </up-form-item>
			      <up-form-item label="服务评价" v-if="deviceInfo.getStatusType == 2">
			        <up-input v-model="deviceInfo.evaluation" border="none"></up-input>
			      </up-form-item>
			      <up-form-item label="评价内容" v-if="deviceInfo.getStatusType == 2">
			        <up-input v-model="deviceInfo.comment" border="none"></up-input>
			      </up-form-item>
		</up-form>
	</view>
</template>

<script setup>
	import {
		ref, computed
	} from "vue"
	import { onLoad } from '@dcloudio/uni-app';
	const deviceInfo = ref({
	  deviceName: "空调温控器",
	  address: "设备地址",
	  faultDesc: "故障描述",
	  reporter: "报修人",
	  phone: "联系电话",
	  reportTime: "保修时间",
	  repairRecord: "维修记录",
	  evaluation: "服务评价",
	  comment: "评价内容",
	  getStatusType: 0 // 用于接收statusType参数
	})
	// 状态类型对应的文本
	const statusText = computed(() => {
	  switch(deviceInfo.value.getStatusType) {
	    case 0: return "待处理";
	    case 1: return "处理中";
	    case 2: return "已完成";
	    default: return "未知状态";
	  }
	})
	// 接收页面参数
	onLoad((options) => {
	  if(options.statusType) {
	    deviceInfo.value.getStatusType = parseInt(options.statusType);
	  }
	})
</script>

<style lang="scss" scoped>
	.report-detail {
		padding: 0 40rpx;

		::v-deep .u-input {
			background: #f2f2f2;
			padding: 15rpx 20rpx !important;
			border-radius: 10px;
		}

		::v-deep .u-input__content__field-wrapper__field {}
	}
</style>